<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #categorySelect {}

    .category-body {
        flex-wrap: wrap;
    }

    .category-item {
        width: 340px;
        height: 40px;
        background: #FFFFFF;
        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        margin-right: 30px;
        margin-bottom: 20px;
    }

    .category-item:hover {
        cursor: pointer;
    }

    .selected-item {
        color: #f00;
    }

    .title-item {
        color: #444;
        font-size: 14px;
        margin-left: 14px;
    }

    .style-item {
        color: #999;
        font-size: 12px;
    }
    .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path{
        color: #7536D0;
    }
    .el-cascader .el-input .el-input__inner,.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner{
        width: 300px;
        border: none !important;
        color: rgba(0,0,0,0);
    }
    .category-style-tip{
        color: #DDDDDD;
        margin-left: 6px;
    }
    .el-radio,.el-checkbox{
        margin-bottom: 20px;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<div id="categorySelect" v-cloak>
    <div class="open-page-container">
        <div v-if="(form=='goods-group' || form=='link') && selectedData && selectedData[0] && selectedData[0].children" class="category-body display-flex">
            <el-radio-group v-model="radioString">
                <el-radio :label="item.id" v-for="(item,index) in selectedData[0].children">{{item.name}}</el-radio>
                </el-radio-group>
        </div>
        <div v-if="form=='category-tabs' && selectedData && selectedData[0] && selectedData[0].children" class="category-body display-flex">
            <el-checkbox-group v-model="checkList">
                <el-checkbox :label="item.id" v-for="(item,index) in selectedData[0].children">{{item.name}}</el-checkbox>
                </el-checkbox-group>
        </div>
        <div v-if="!form && selectedData[0].children.length==0">暂无分类,请去添加</div>
    </div>
    <div class="open-page-button-container">
        <div class="dialog-button dialog-button-define" @click="close()">确定</div>
    </div>
</div>